import { format, eachDayOfInterval } from 'date-fns'
import { formatNumber } from '@/utils/utils'

const typeInfo = {
  color: 'rgba(44, 93, 255, 1)',
  linearColor: 'rgba(44, 93, 255, 0.3)',
}

export const statisticArr = [
  {
    id: 1,
    icon: '/images/s1.webp',
    label: '点击次数',
    tooltip: '链接的点击次数',
    key: 'clickCount',
  },
  {
    id: 2,
    icon: '/images/s2.webp',
    label: '注册数',
    tooltip: '绑定该id的账号数量',
    key: 'registerCount',
  },
  {
    id: 3,
    icon: '/images/s3.webp',
    label: '订单数',
    tooltip: '绑定账号的首笔订单数量',
    key: 'orderCount',
  },
  {
    id: 4,
    icon: '/images/s4.webp',
    label: '订单金额',
    tooltip: '满足条件的订单金额',
    unit: '￥',
    key: 'orderAmount',
    isMoney: true,
  },
  {
    id: 5,
    icon: '/images/s4.webp',
    label: '分成金额',
    tooltip: '订单金额*分成比例',
    unit: '￥',
    key: 'proportionAmount',
    isMoney: true,
  },
]

const getStartEndDate = ({ start, end }) => {
  const datesArray = eachDayOfInterval({ start, end })
  const formattedDates = datesArray.map((date) => format(date, 'yyyy-MM-dd'))
  return formattedDates
}

const generateAxisLabel = (date) => {
  const axisLabel = {
    interval: 0,
    formatter: function (_, index) {
      return date[index]
    },
  }
  if (date.length > 8) {
    axisLabel.interval = function (index, value) {
      if (index % Math.ceil(date.length / 8) === 0) {
        return true
      } else {
        return false
      }
    }
    axisLabel.formatter = function (value, index) {
      return date[index]
    }
  }
  return axisLabel
}

export const generateOption = ({ echarts, data, date, hasPercentage, name, isMoney }) => {
  const dateArr = getStartEndDate(date)

  const option = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLabel: generateAxisLabel(dateArr),
    },
    grid: {
      top: 20,
      bottom: 40,
      left: 66,
      right: 66,
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
      backgroundColor: 'transparent', // 背景颜色，默认为黑色透明度为0.7                  // 边框宽度，默认为0（无边框）
      padding: 0,
      textStyle: {
        color: '#ffffff',
        fontSize: 12,
        fontFamily: 'PingFang SC',
      },
      formatter: function (params) {
        let tooltipContent = `<div class=' leading-5 mb-1 font-medium'>${dateArr[params[0].dataIndex]}</div>`
        params.forEach(function (item) {
          tooltipContent += `<div class='rounded h-8 flex items-center bg-white-10' style="width:10.25rem;box-shadow: 6px 0px 20px 0px rgba(34, 87, 188, 0.1);padding:0 10px">
          <span class='inline-block' style="border-radius:50%;width:10px;height:10px;background: #2C5DFF;;margin-right:6px"></span>
          <span>${item.seriesName}</span>
          <span class='text-sm font-semibold ml-5'> ${formatNumber(item.value, isMoney)} ${item.value >= 10000 ? 'w' : ''}</span>
          </div>`
        })
        return `<div class='h-20 bg-bg rounded-md px-2 py-3' style='width:11.25rem;backdrop-filter: blur(10px);border: 0.5px solid ;border-image: linear-gradient(316deg, #FFFFFF 6%, rgba(255, 255, 255, 0) 63%) 0.5;'>
          ${tooltipContent}
        </div>`
      },
    },
  }

  option.series = {
    name,
    type: 'line',
    smooth: true,
    data: data,
    lineStyle: {
      width: 3,
    },
    yAxisIndex: 0,
    itemStyle: {
      color: typeInfo.color,
    },
    emphasis: {
      focus: 'series',
    },
    areaStyle: {
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
          offset: 0,
          color: typeInfo.linearColor,
        },
        {
          offset: 1,
          color: 'rgba(255, 255, 255, 0)',
        },
      ]),
    },
  }

  option.yAxis = [
    {
      type: 'value',
      axisLabel: {
        formatter: function (index) {
          if (index >= 10000) {
            return index / 10000 + 'w'
          } else if (index >= 1000) {
            return index / 1000 + 'k'
          }
          return index
        },
      },
    },
  ]
  if (hasPercentage) {
    option.yAxis.push({
      type: 'value',
      axisLabel: {
        formatter: '{value}%',
      },
    })
  }

  return option
}
